import React, { Component } from 'react';
import { Modal, Table, Row, Col, Icon, Button } from 'antd';
import { Link } from 'dva/router';
import RangePicker from '../../plugin/rangePicker';
import { AccessControl } from '../../../utils/common';
import 'moment/locale/zh-cn';
import moment from 'moment';
import Styles from './adData.less';

moment.locale('zh-cn');
class SummaryData extends Component {
  constructor (props) {
    super(props);
    this.state = {
      endTime: moment(Date.now()).format('YYYY-MM-DD'),
      beginTime: moment(Date.now()).format('YYYY-MM-DD')
    }
  }
  onClose = () => {
    const { onClose } = this.props;
    onClose();
  }
  // 切换时间
  handleRangePicker = (beginTime, endTime) => {
    this.setState({
      beginTime: moment(beginTime).format('YYYY-MM-DD'),
      endTime: moment(endTime).format('YYYY-MM-DD')
    })
    const { showSummary, planId } = this.props;
    if(planId) {
      showSummary('every', beginTime, endTime, planId);
    }else {
      showSummary('time', beginTime, endTime);
    }
  }
  downloadData = () => {
    let DownloadSearch = JSON.stringify(this.props.searchParams);
    DownloadSearch = JSON.parse(DownloadSearch);
      DownloadSearch.beginTime = this.state.beginTime;
      DownloadSearch.endTime = this.state.endTime;
    const dateNow = moment(Date.now()).format('YYYY-MM-DD');
    this.setState({
      beginTime: dateNow,
      endTime: dateNow
    })
    DownloadSearch.planId = this.props.planId;
    window.location.href = `http://${window.location.host}/api/dsp/statistics/ad/plan/data/period/download?data=${encodeURIComponent(JSON.stringify(DownloadSearch))}`;
  }
  render () {
    const summaryTitle = [
      {
        title: '曝光量',
        dataIndex: 'exposureCount',
        key: 'exposureCount'
      },
      {
        title: '点击量',
        dataIndex: 'clickCount',
        key: 'clickCount'
      },
      {
        title: '点击率',
        dataIndex: 'clickRate',
        key: 'clickRate'
      },
      {
        title: '点击均价',
        dataIndex: 'avgPrice',
        key: 'avgPrice'
      },
      {
        title: '总消耗',
        dataIndex: 'consumeTotal',
        key: 'consumeTotal'
      }
    ];
    const columnsTime = [
      {
  		  title: '序号',
  		  dataIndex: 'index',
  		  key: 'index'
  		},
      {
        title: '时间',
        dataIndex: 'time',
        key: 'time'
      },
      {
        title: '爆光量',
        dataIndex: 'exposureCount',
        key: 'exposureCount'
      },
      {
        title: '点击量',
        dataIndex: 'clickCount',
        key: 'clickCount'
      },
      {
        title: '点击率',
        dataIndex: 'clickRate',
        key: 'clickRate'
      },
      {
        title: '点击均价',
        dataIndex: 'avgPrice',
        key: 'avgPrice'
      },
      {
        title: '总消耗（元)',
        dataIndex: 'consumeTotal',
        key: 'consumeTotal'
      }
    ];
    const stkey = '23',
          summaryObj = this.props.summaryList[0];
    let st = [<Col key={stkey} span={7}>汇总</Col>];
    for(let k in summaryObj){
      st.push(<Col key={k} span={3}>{summaryObj[k]}</Col>);
    }
    const stThree = st[3];
    st.splice(3,1);
    st.push(stThree);
    const timeFotter = (
      <div className={Styles.timeFotter}>
        <Row className={Styles.huiZongOne}>
          {st}
        </Row>
      </div>
    );
    const permissionList = this.props.permissions;
    const downLoadObj = AccessControl(permissionList, 'dsp_ad_data_export') ?
		(
			<Button type="primary" icon="download" className={Styles.downloadBtn} onClick={this.downloadData}></Button>
		):'';
    return (
      <div>
        <Modal
          title="时段分析"
          width={1000}
          key={this.props.planId + 'mt' || 'timeList'}
          onCancel={this.onClose}
          footer={null}
          visible={this.props.summaryTimeVisible}
        >

          <Row className={Styles.list}>
            <Col span={24} className={Styles.head}>
              <div className={Styles.timeFilter}>
                <RangePicker onComplete={this.handleRangePicker} />
              </div>
              {downLoadObj}
            </Col>
            <Col span={24}>
              <Table
                rowKey={record => record.index}
                dataSource={this.props.summaryTotlelist}
                columns={columnsTime}
                footer={() => timeFotter}
                pagination={false}
              />
            </Col>
          </Row>
        </Modal>
      </div>
    )
  }
}
export default SummaryData;
